/*
 * @Date: 2022-05-20 17:03:29
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-05-20 19:37:14
 * @FilePath: \my-react-components\src\component\Tabs\TabItem.tsx
 * @Description: something
 */
import classNames from "classnames";
import React, { memo, useContext } from "react";
import { tabContext } from ".";
export interface TabItemProps {
  label: string;
  children: React.ReactNode;
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
  index?: string;
}
const TabItem: React.FC<TabItemProps> = memo(
  ({ label, children, disabled, className, style, index }) => {
    const context = useContext(tabContext);

    const classes = classNames("tab-item", className, {
      "is-active": context.index === index,
      "is-disabled": disabled,
      "border-class": context.border,
    });

    const handleClick = () => {
      context.getchildren!(children);
      if (context.onSelect && !disabled && typeof index === "string") {
        context.onSelect(index);
      }
    };
    return (
      <>
        <li className={classes} style={style} onClick={handleClick}>
          {label}
        </li>
      </>
    );
  },
);
TabItem.displayName = "TabItem";
export default TabItem;
